<template>
    <div class="container-fluid">
        <MyHeader></MyHeader>
        <article>
			<div class="topbox">
				<ul>
					<li><i><a href="/"><span class="tnum">1</span><span class="tpic"><img src="./../assets/5.jpg"></span><span class="toptext">html5个人博客模板《simple》</span></a></i></li>
					<li><i><a href="/"><span class="tnum">2</span><span class="tpic"><img src="./../assets/mb2.jpg"></span><span class="toptext">html5个人博客模板《simple》</span></a></i></li>
					<li><i><a href="/"><span class="tnum">3</span><span class="tpic"><img src="./../assets/mb3.jpg"></span><span class="toptext">html5个人博客模板《simple》</span></a></i></li>
					<li><i><a href="/"><span class="tnum">4</span><span class="tpic"><img src="./../assets/mb4.jpg"></span><span class="toptext">html5个人博客模板《simple》</span></a></i></li>
				</ul>
			</div>
			<div class="classtify">
				<ul>
					<li class="flselect"><a href="#top1">古典个人博客</a> </li>
					<li><a href="#top2">小清新</a> </li>
					<li><a href="#top3">时尚简洁</a> </li>
					<li><a href="#top4">技术门户</a> </li>
					<li><a href="#top5">国外html5</a> </li>
					<li><a href="#top6">PSD设计图</a> </li>
				</ul>
			</div>
			<div class="mbans">
				<div class="mban" style="display: block;" name="top1">
					<ul>
						<li><i><a href="/"><span class="tnum">原创</span><img src="./../assets/mb1.jpg"> <span class="mbtitle">个人博客模板《simple》</span>
								</a></i></li>
						<li><i><a href="/"><span class="tnum">原创</span><img src="./../assets/mb2.jpg"> <span class="mbtitle">个人博客模板《simple》</span>
								</a></i></li>
						<li><i><a href="/"><span class="tnum">原创</span><img src="./../assets/mb3.jpg"> <span class="mbtitle">个人博客模板《simple》</span>
								</a></i></li>
						<li><i><a href="/"><span class="tnum">原创</span><img src="./../assets/mb4.jpg"> <span class="mbtitle">个人博客模板《simple》</span>
								</a></i></li>
						<li><i><a href="/"><span class="tnum">原创</span><img src="./../assets/mb5.jpg"> <span class="mbtitle">个人博客模板《simple》</span>
								</a></i></li>
						<li><i><a href="/"><span class="tnum">原创</span><img src="./../assets/mb1.jpg"> <span class="mbtitle">个人博客模板《simple》</span>
								</a></i></li>
						<li><i><a href="/"><span class="tnum">原创</span><img src="./../assets/mb2.jpg"> <span class="mbtitle">个人博客模板《simple》</span>
								</a></i></li>
						<li><i><a href="/"><span class="tnum">原创</span><img src="./../assets/mb3.jpg"> <span class="mbtitle">个人博客模板《simple》</span>
								</a></i></li>
						<li><i><a href="/"><span class="tnum">原创</span><img src="./../assets/mb4.jpg"> <span class="mbtitle">个人博客模板《simple》</span>
								</a></i></li>
						<li><i><a href="/"><span class="tnum">原创</span><img src="./../assets/mb5.jpg"> <span class="mbtitle">个人博客模板《simple》</span>
								</a></i></li>
					</ul>
				</div>
				<div class="mban" name="top2">
					<ul>
						<li><i><a href="/"><span class="tnum">原创</span><img src="./../assets/mb1.jpg"> <span class="mbtitle">个人博客模板《simple》</span>
								</a></i></li>
						<li><i><a href="/"><span class="tnum">原创</span><img src="./../assets/mb4.jpg"> <span class="mbtitle">个人博客模板《simple》</span>
								</a></i></li>
						<li><i><a href="/"><span class="tnum">原创</span><img src="./../assets/mb2.jpg"> <span class="mbtitle">个人博客模板《simple》</span>
								</a></i></li>
						<li><i><a href="/"><span class="tnum">原创</span><img src="./../assets/mb3.jpg"> <span class="mbtitle">个人博客模板《simple》</span>
								</a></i></li>
						<li><i><a href="/"><span class="tnum">原创</span><img src="./../assets/mb5.jpg"> <span class="mbtitle">个人博客模板《simple》</span>
								</a></i></li>
					</ul>
				</div>
				<div class="mban" name="top3">
					<ul>
						<li><i><a href="/"><span class="tnum">原创</span><img src="./../assets/mb2.jpg"> <span class="mbtitle">个人博客模板《simple》</span>
								</a></i></li>
						<li><i><a href="/"><span class="tnum">原创</span><img src="./../assets/mb3.jpg"> <span class="mbtitle">个人博客模板《simple》</span>
								</a></i></li>
						<li><i><a href="/"><span class="tnum">原创</span><img src="./../assets/mb4.jpg"> <span class="mbtitle">个人博客模板《simple》</span>
								</a></i></li>
						<li><i><a href="/"><span class="tnum">原创</span><img src="./../assets/mb5.jpg"> <span class="mbtitle">个人博客模板《simple》</span>
								</a></i></li>
						<li><i><a href="/"><span class="tnum">原创</span><img src="./../assets/mb1.jpg"> <span class="mbtitle">个人博客模板《simple》</span>
								</a></i></li>
					</ul>
				</div>
				<div class="mban" name="top4">
					<ul>
						<li><i><a href="/"><span class="tnum">原创</span><img src="./../assets/mb3.jpg"> <span class="mbtitle">个人博客模板《simple》</span>
								</a></i></li>
						<li><i><a href="/"><span class="tnum">原创</span><img src="./../assets/mb1.jpg"> <span class="mbtitle">个人博客模板《simple》</span>
								</a></i></li>
						<li><i><a href="/"><span class="tnum">原创</span><img src="./../assets/mb2.jpg"> <span class="mbtitle">个人博客模板《simple》</span>
								</a></i></li>
						<li><i><a href="/"><span class="tnum">原创</span><img src="./../assets/mb4.jpg"> <span class="mbtitle">个人博客模板《simple》</span>
								</a></i></li>
						<li><i><a href="/"><span class="tnum">原创</span><img src="./../assets/mb5.jpg"> <span class="mbtitle">个人博客模板《simple》</span>
								</a></i></li>
					</ul>
				</div>
				<div class="mban" name="top5">
					<ul>
						<li><i><a href="/"><span class="tnum">原创</span><img src="./../assets/mb2.jpg"> <span class="mbtitle">个人博客模板《simple》</span>
								</a></i></li>
						<li><i><a href="/"><span class="tnum">原创</span><img src="./../assets/mb1.jpg"> <span class="mbtitle">个人博客模板《simple》</span>
								</a></i></li>
						<li><i><a href="/"><span class="tnum">原创</span><img src="./../assets/mb4.jpg"> <span class="mbtitle">个人博客模板《simple》</span>
								</a></i></li>
						<li><i><a href="/"><span class="tnum">原创</span><img src="./../assets/mb3.jpg"> <span class="mbtitle">个人博客模板《simple》</span>
								</a></i></li>
						<li><i><a href="/"><span class="tnum">原创</span><img src="./../assets/mb5.jpg"> <span class="mbtitle">个人博客模板《simple》</span>
								</a></i></li>
					</ul>
				</div>
				<div class="mban" name="top6">
					<ul>
						<li><i><a href="/"><span class="tnum">原创</span><img src="./../assets/mb5.jpg"> <span class="mbtitle">个人博客模板《simple》</span>
								</a></i></li>
						<li><i><a href="/"><span class="tnum">原创</span><img src="./../assets/mb1.jpg"> <span class="mbtitle">个人博客模板《simple》</span>
								</a></i></li>
						<li><i><a href="/"><span class="tnum">原创</span><img src="./../assets/mb2.jpg"> <span class="mbtitle">个人博客模板《simple》</span>
								</a></i></li>
						<li><i><a href="/"><span class="tnum">原创</span><img src="./../assets/mb3.jpg"> <span class="mbtitle">个人博客模板《simple》</span>
								</a></i></li>
						<li><i><a href="/"><span class="tnum">原创</span><img src="./../assets/mb4.jpg"> <span class="mbtitle">个人博客模板《simple》</span>
								</a></i></li>
					</ul>
				</div>
			</div>
		</article>
        <MyFooter></MyFooter>
    </div>
</template>
<script>
import MyHeader from './header'
import MyFooter from './footer'
export default {
    components:{MyHeader,MyFooter},
    name:'photo',
    mounted(){
        this.initPhoto();
    },
    methods:{
        initPhoto:function(){            
            $('.classtify li').click(function(){
                $(this).addClass('flselect').siblings().removeClass('flselect');
                $('.mbans>div:eq('+$(this).index()+')').show().siblings().hide();
            });
        }
    }
}
</script>
<style>
@import url("../lib/css/base.css");
@import url("../lib/css/photo.css");
@import url("../lib/css/m.css");
</style>
